// MacControls.tsx
import { useEffect, useState } from 'react';
import type { WebviewWindow } from '@tauri-apps/api/webviewWindow';

// 定义 Props 类型（对应 Svelte 的 export let）
interface MacControlsProps {
    appWindow: WebviewWindow;
    noSideEffect: boolean;
}

const MacControls = ({ appWindow, noSideEffect }: MacControlsProps) => {
    const [isMaximized, setIsMaximized] = useState(false); // 替代 Svelte 的 let isMaximized

    // 替代 Svelte 的 onMount：组件挂载后绑定事件
    useEffect(() => {
        // 获取 DOM 元素（用 useRef 更规范，这里先简化用 getElementById）
        const closeBtn = document.getElementById('close-mac');
        const minimizeBtn = document.getElementById('minimize-mac');
        const maximizeBtn = document.getElementById('maximize-mac');

        // 绑定关闭事件
        const handleClose = () => appWindow.close();
        // 绑定最小化事件
        const handleMinimize = () => appWindow.minimize();
        // 绑定最大化/还原事件
        const handleMaximize = async () => {
            if (isMaximized) {
                await appWindow.unmaximize();
                setIsMaximized(false);
            } else {
                await appWindow.maximize();
                setIsMaximized(true);
            }
        };

        // 绑定事件监听器（注意：React 中需手动移除，避免内存泄漏）
        closeBtn?.addEventListener('click', handleClose);
        minimizeBtn?.addEventListener('click', handleMinimize);
        maximizeBtn?.addEventListener('click', handleMaximize);

        // 监听窗口最大化状态（替代 Svelte 的 setInterval）
        let interval = null;
        if (!noSideEffect) {
            interval = setInterval(async () => {
                const maximized = await appWindow.isMaximized();
                setIsMaximized(maximized);
                // 控制 body 圆角（同 Svelte 逻辑）
                document.body.style.borderRadius = maximized ? '0px' : '10px';
            }, 300);
        }

        // 组件卸载时清理：移除事件监听器和定时器
        return () => {
            closeBtn?.removeEventListener('click', handleClose);
            minimizeBtn?.removeEventListener('click', handleMinimize);
            maximizeBtn?.removeEventListener('click', handleMaximize);
            if (interval) clearInterval(interval);
        };
    }, [appWindow, noSideEffect, isMaximized]); // 依赖数组：状态/Props 变化时重新执行

    // JSX 替代 Svelte 的 markup（条件渲染用三元表达式，同 Svelte 的 {#if}）
    return (
        <div className="controls">
            <div className="close" id="close-mac" />
            <div className="minimize" id="minimize-mac" />
            <div className="maximize" id="maximize-mac" />
        </div>
    );
};

export default MacControls;
